<template>
    <div class="app-container">

        <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large">
            <el-row :gutter="20">
                <el-col :span="21">
                    <el-form-item label="发放用户手机号：" prop="mobile">
                        <el-input v-model="form.mobile" placeholder="请输入发放用户手机号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button class="search-btn" @click="handleSearch">检测</el-button>
                </el-col>
                <div class="info-div">
                    <span class="canuse">姓名：{{ vip.memberCode ? vip.name : '--' }}</span>
                    <span class="canuse">可用券：{{ vip.memberCode ? vip.cardList[currentCardIndex].ticketCount : '--' }}</span>
                </div>
                <el-col :span="24">
                    <el-form-item label="会员卡选择：" prop="payCode">
                        <el-select v-model="form.cardNo" @change="changeCardNo">
                            <el-option v-for="item in card_options" :key="item.cardNo" :value="item.cardNo"
                                :label="`${item.cardName}：No.${item.cardNo}`" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <div class="info-div">
                    <span class="canuse">本金：<span class="color-FF3333">{{ vip.memberCode ?
                        vip.cardList[currentCardIndex].currentAmt : '--' }}</span></span>
                    <span class="canuse">金币：<span class="color-FF3333">{{ vip.memberCode ?
                        vip.cardList[currentCardIndex].currentCoins : '--' }}</span></span>
                    <span class="canuse">积分：<span class="color-FF3333">{{ vip.memberCode ?
                        vip.cardList[currentCardIndex].currentPoint : '--' }}</span></span>
                </div>
                <el-col :span="24">
                    <el-form-item label="营销活动名：" prop="activityName">
                        <el-input v-model="form.activityName" placeholder="请输入营销活动名" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="发放券名称：" prop="payCode">
                        <el-input v-model="form.currentTicket.TicketName" readonly placeholder="请选择发放券" clearable
                            @click="handleSelectTicket" />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button class="search-btn" @click="handleSelectTicket">选择券</el-button>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="发放券数量：" prop="sendCount">
                        <el-input v-model="form.sendCount" placeholder="请输入发放券数量" clearable>
                            <template #append>张</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="券发放方式：" prop="sendType">
                        <el-radio-group v-model="form.sendType">
                            <el-radio v-for="item, index in sendType_options" :key="index" :value="item.code">{{
                                item.name }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="有效日期：" prop="usefulDateType">
                        <el-radio-group v-model="form.usefulDateType">
                            <el-radio v-for="item, index in useTime_options" :key="index" :value="item.code">{{
                                item.name }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <template v-if="form.usefulDateType == 1">
                    <el-col :span="16">
                        <el-form-item label="有效起止时间：" prop="useTimeRange">
                            <el-date-picker v-model="form.useTimeRange" type="datetimerange" start-placeholder="开始时间"
                                end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                        </el-form-item>
                    </el-col>
                </template>
                <template v-else-if="form.usefulDateType == 2">
                    <el-col :span="8">
                        <el-form-item label="领券后：" prop="startDays">
                            <el-input-number class="input-number-temp" v-model="form.startDays" :min="0" :precision="0"
                                clearable style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="line-height-40">天生效</div>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="有效天数：" prop="limitDays">
                            <el-input-number class="input-number-temp" v-model="form.limitDays" :min="0" :precision="0"
                                clearable style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="line-height-40">天</div>
                    </el-col>
                </template>
                <el-col :span="24">
                    <el-form-item label="发放备注：" prop="sendRemarks">
                        <el-input v-model="form.sendRemarks" placeholder="请输入发放备注" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="footer-box">
            <el-button class="cancel" @click="handleCancel">取消</el-button>
            <el-button :loading="isLoading" class="submit" @click="handleSubmit">确认</el-button>
        </div>
    </div>

    <TicketDialog ref="TicketRef" v-if="TicketVisible" :visible="TicketVisible" @emitCancel="emitTicketCancel"
        @emitSubmit="emitTicketSubmit" :form="form" />
</template>

<script setup>

import TicketDialog from "./ticketDialog.vue"
import Api from '@/api'


// 表单rules
const rules = reactive({
    mobiles: [
        { required: true, message: '请输入手机号', trigger: 'change' },
    ],
})

const isLoading  = ref(false)

// 获取券发放方式 免费发放和付费领取
const sendType_options = ref([])
const get_sendType_options = () => {
    sendType_options.value = [
        { name: '免费发放', code: 1 },
        { name: '付费领取', code: 2 },
    ]
}
get_sendType_options()

// 获取有效日期 固定日期和相对日期
const useTime_options = ref([])
const get_useTime_options = () => {
    useTime_options.value = [
        { name: '固定日期', code: 1 },
        { name: '相对日期', code: 2 },
    ]
}
get_useTime_options()


let vip = ref({})
let card_options = ref([])
let currentCardIndex = ref(0)
const handleSearch = async () => {
    if (!form.value.mobile) return
    // console.log(mobile.value)
    await Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": form.value.mobile } })
        .then(res => {
            console.log('搜索会员res :>> ', res);
            if (res.result == '') return ElNotification({
                title: '提示',
                message: '没有搜索到会员',
                type: 'warning',
            })
            vip.value = res
            card_options.value = res.cardList
            form.value.cardNo = res.cardList[0].cardNo
        })
}

// 改变会员卡选择
const changeCardNo = (v) => {
    // console.log('v :>> ', v);
    card_options.value.forEach((item, index) => {
        if (item.cardNo == v) {
            currentCardIndex.value = index
        }
    });
}

// 点击选择发放券
// -----------------------选择可用券-------------------
let TicketVisible = ref(false)
const TicketRef = ref()
const handleSelectTicket = (name) => {
    //   if (!user.re.memberCode) return ElNotification({
    //     title: '提示',
    //     message: '请先查询会员信息',
    //     type: 'warning',
    //   })
    TicketVisible.value = true
    // nextTick(() => {
    //   const data = {
    //     user: user.re,
    //     currentCard: currentCard.value,
    //     activeName: name
    //   }
    //   TicketRef.value.open(data)
    // });
}
// 取消表格弹窗
const emitTicketCancel = (params) => {
    console.log(params)
    TicketVisible.value = false
}
// 提交表格弹窗
const emitTicketSubmit = (params) => {
    console.log(params)
    TicketVisible.value = false
}



const form = ref({ sendType: 1, usefulDateType: 1, currentTicket: {} })

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const formRef = ref()
const handleSubmit = (params) => {
    console.log(form.value)
    isLoading.value = true;  // 开始加载
    // return
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            // 处理优惠券编码
            form.value.ticketCode = form.value.currentTicket.TicketCode
            // 处理时间
            if (form.value.useTimeRange && form.value.useTimeRange.length > 1) {
                form.value.startDate = form.value.useTimeRange[0]
                form.value.endDate = form.value.useTimeRange[1]
            }
            let data = {
                ...form.value,
                memberCarCode: form.value.cardNo,
                // ticketCode: form.value.ticketCode,
                // memberCarCode: form.value.cardNo,
                // startDate: form.value.startDate,
                // endDate: form.value.endDate,
                // usefulDateType: form.value.usefulDateType,
                // limitDays: form.value.limitDays,
                // startDays: form.value.startDays,
                // activityName: form.value.activityName,
                // sendCount: form.value.sendCount,
                // sendType: form.value.sendType,
                // sendRemarks: form.value.sendRemarks,
            }

            if(!form.value.sendCount) {
                ElNotification({
                    title: '提示',
                    message: '发放券数量不能为空',
                    type: 'error',
                })
                isLoading.value = false;
                return
            }
            
            Api.Common.PcObjProcess.Do({ "functionName": "SendOrgTicket", "orgCode": "0004", "contentData": { ...data, } }).then(res => {
                console.log('赠送券res :>> ', res);
                ElNotification({
                    title: '提示',
                    message: '赠送成功',
                    type: 'success',
                })
                isLoading.value = false; 
                emit('emitSubmit',)
            }).catch(err=> {
                isLoading.value = false; 
            })
        }
    })
}

</script>

<style scoped lang="scss">
.form-box {
    margin-top: 20px;
    padding: 0 40px;

    .search-btn {
        float: right;
        width: 80px;
        background: #FFE566;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        border: 0;
    }

    .info-div {
        margin-bottom: 20px;
        padding-left: 150px;

        .canuse {
            margin-right: 50px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }
    }


    ::v-deep {
        .el-radio__inner {
            // margin-left: 20px;
            width: 20px;
            height: 20px;
        }

        .el-radio__input.is-checked .el-radio__inner {
            border-color: #ff6a00;
            /* 选中状态边框颜色 */
            background-color: #ffffff;
            /* 选中状态背景颜色 */
        }

        .el-radio__inner:after {
            background-color: #ff6a00;
            width: 8px;
            height: 8px;
        }

        .el-radio__label {
            color: #212121 !important;
        }
    }

    .input-number-temp {
        border: 1px solid #ffffff;
    }

}

.footer-box {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
    }
}

.color-FF3333 {
    color: #FF3333
}

.line-height-40 {
    line-height: 40px;
}
</style>
